<template>
    <MiAddressEdit ref="editref" v-if="isEdit" v-model:isEdit = "isEdit"></MiAddressEdit>
    <div class="box-address">
        <div class="header">
            <img @click="router.back()" src="@/assets/img/Address/icon_arrow_left_black.png" alt="">
            <p>收货地址</p>
        </div>
        <ul class="container">
            <li class="item" v-for="item in Address.listMain" :key="item.id">
                <div class="left">
                    <div class="top">
                        <p class="name">{{ item.receiveName }}</p>
                        <span class="phone">{{ `${item.receivePhone.slice(0, 3)}****${item.receivePhone.slice(7)}`
                        }}</span>
                    </div>
                    <div class="bottom">
                        <span class="default" v-show="item.isDefault">默认</span>
                        <p class="address">{{`${item.receiveRegion}- ${item.receiveDetail}`}}</p>
                    </div>
                </div>
                <div class="right">
                    <el-icon style="width:17px;height: 17px;color: #b0b0b0;" @click="beginUpdate(item)">
                        <Edit />
                    </el-icon>
                </div>
            </li>
        </ul>
        <div class="footer">
            <button class="btn-add" @click="beginAdd">
                <el-icon style="width:17px;height: 17px;">
                    <Plus />
                </el-icon>
                添加地址
            </button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted,nextTick} from 'vue'
import { useAddress } from '@/store'
import MiAddressEdit from '@/components/MiAddressEdit/MiAddressEdit.vue'
import { useRouter } from 'vue-router';




const router = useRouter()
const editref = ref()
const Address = useAddress()

onMounted(async () => {
    Address.init()
})

const isEdit = ref<boolean>(false)

const beginAdd = ():void=>{
    isEdit.value = true
    //节流
    nextTick(()=>{
        editref.value.beginAdd()
    })
    
}
const beginUpdate =(data:Vm.Address) =>{
    isEdit.value = true
    //节流
    nextTick(()=>{
        editref.value.beginUpdate(data)
    })
}


</script>
<style lang="stylus" scoped>
.box-address
    width 100%
    height 100%
    display flex
    flex-direction column
.header
    height 44px
    display flex
    align-items center
    justify-content center
    position relative
    font-size: 16px;
    flex-shrink 0
.header img
    width 39px
    height 48px
    position absolute
    top 0
    left 0   

.container,.footer
    padding-right: 4px;
    padding-left: 4px;

.container
    flex-grow 1

.container li
    display flex
    padding: 10px 0px 10px 10px;
    border-bottom 1px solid rgb(229, 229, 229)

.left
    padding-left 14px
    flex-grow 1 
    display flex
    flex-direction column

.top
    display flex
    justify-content space-between

.name
    font-size: 15px;

.phone
    color: rgb(51, 51, 51);
    font-size: 15px;

.bottom
    flex-grow 1
    display flex
    height 42px
.default
    border: 1px solid rgb(182, 9, 9);
    margin-right: 6px;
    margin-top: 5px;
    font-size: 12px;
    color rgb(182, 9, 9);
    width 31px
    height 17px
    line-height 17px
    text-align center

.address
    color: rgb(102, 102, 102);
    font-size: 12px;











.right
    padding 17px



.footer
    display flex
    justify-content center
    align-items center
    flex-shrink 0
    padding 15px
    
.btn-add
    background-color: rgb(255, 255, 255);
    border-color: rgb(132, 95, 63);
    border-radius: 5px;
    border-width: 1px;
    height: 44px;
    width 335px
    color: rgb(132, 95, 63);
    font-size: 14px;
    


</style>